<template>
  <div class="flex direction-column">
    <div class="search-form">
      <el-form inline>
        <el-form-item label="月份范围">
          <el-date-picker
            type="monthrange" v-model="monthrange"
            range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份"
            format="yyyy-MM" value-format="yyyy-MM"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="区域">
          <el-select v-model="area">
            <el-option
              v-for="option in districts" :key="option.code"
              :label="option.name" :value="option.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="border-radius">
      <el-radio-group v-model="type">
        <el-radio-button v-for="option in typeOptions" :key="option.value" :label="option.value"
        >
          {{ option.name }}
        </el-radio-button>
      </el-radio-group>
    </div>
    <div class="bg-white border-radius margin-top">
      <div class="info-head">{{ typeText }}详情</div>
      <div class="info-content padding">
        <el-table
          v-loading="loading" :data="lists" height="300px"
          :header-cell-style="{
            backgroundColor: themeColor,
            color: 'white'
          }"
        >
          <el-table-column v-for="column in columns" :key="column.prop" v-bind="column"></el-table-column>
        </el-table>
      </div>
    </div>
    <div class="bg-white border-radius margin-top">
      <div class="info-head">{{ typeText }}趋势分析</div>
      <div class="info-content">
        <v-chart :option="chartOption" style="width:100%;height:400px;"></v-chart>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'energy-efficiency-analysis-warning',
  data () {
    return {
      monthrange: [],
      area: '',
      type: '1',
      typeOptions: [
        { name: '综合能源消费量', value: '1' },
        { name: '用电量', value: '2' },
        { name: '用煤量', value: '3' },
        { name: '用油量', value: '4' },
        { name: '万元产值单耗', value: '5' },
        { name: '能源消费总量', value: '6' },
      ],
      loading: false,
      lists: [],
      columns: [
        { label: '时间', prop: 'col1' },
        { label: '实际值（万吨标准煤）', prop: 'col2' },
        { label: '正常预测值上限（万吨标准煤）', prop: 'col3' },
        { label: '正常预测值下限（万吨标准煤）', prop: 'col4' },
      ]
    }
  },
  computed: {
    themeColor () {
      return this.$store.state.user.theme
    },
    districts () {
      return this.$store.getters['user/districts']
    },
    qs () {
      const monthrange = this.monthrange
      return {
        start: monthrange[0],
        end: monthrange[1],
        area: this.area,
        type: this.type,
      }
    },
    typeText () {
      const type = this.type
      const options = this.typeOptions
      const target = options.find(v => v.value === type)
      return target ? target.name : ''
    },
    chartOption () {
      // TODO
      const months = ['2022-10', '2022-11', '2022-12', '2023-1', '2023-2', '2023-3', '2023-4']
      const lines = this.columns.slice(1).map(v => v.label)
      return {
        legend: {
          left: 'center',
          bottom: '5%'
        },
        grid: {
          left: '5%',
          right: '5%',
          bottom: '24%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        xAxis: {
          type: 'category',
          data: months
        },
        yAxis: {
          type: 'value',
          name: '万吨标准煤',
        },
        series: [
          ...lines.map(v => ({
            type: 'line',
            smooth: true,
            name: v,
            data: months.map(() => Math.round(Math.random() * 99 + 1))
          }))
        ]
      }
    }
  },
  watch: {
    type () {
      this.getLists()
    }
  },
  mounted () {
    this.getLists()
  },
  methods: {
    getLists () {
      this.loading = true
      // TODO
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve()
          this.loading = false
          this.lists = [
            ...['2023-2', '2023-3', '2023-4'].map((v) => ({
              col1: v,
              col2: Math.round(Math.random() * 99 + 1),
              col3: 0,
              col4: 0
            }))
          ]
        }, 300)
      })
    },
    onSearch () {}
  }
}
</script>

<style lang="scss" scoped>
  @import "@/assets/style/variable.scss";

  .info-head {
    padding: 20px $gutter 0 $gutter;
    font-size: 16px;
  }
</style>
